<template>
  <div>
    <van-sticky>
      <!-- <van-nav-bar title="搜索" left-arrow @click-left='backOff'></van-nav-bar> -->
      <van-search v-model="searchValue" placeholder="输入搜索关键词后按下回车" show-action @search="onSearch" @cancel="onCancel">
        <template #left>
          <van-icon size='18' name='arrow-left' @click="backOff"></van-icon>
        </template>
      </van-search>
    </van-sticky>
    <!-- 搜索结果 -->
    <template v-if='searchResult.length != 0'>
      <van-row v-for='artItem in searchResult' :key='artItem.title'>
        <van-col span='22' offset='1' @click='articleItem(artItem.id)'>
          <van-card :desc="artItem.synopsis" :title="artItem.title" thumb="https://img01.yzcdn.cn/vant/ipad.jpeg">
            <template v-if="artItem.isPay != '0' ? true : false" #tag>
              <van-tag type='warning'>付费</van-tag>
            </template>
            <template v-if="artItem.isPay != '0' ? true : false" #price>
              {{artItem.price}}
            </template>
            <template v-if="artItem.isPay != '0' ? true : false" #num>
              1
            </template>
            <template #tags>
              <van-tag plain type="danger">{{realCid(artItem.cid)}}</van-tag>
            </template>
            <template #footer>
              <van-button v-if="artItem.isPay != '0' ? true : false" size='mini' @click.stop='log(artItem)'>加入购物车</van-button>
              <van-button v-if="artItem.isPay != '0' ? true : false" size='mini' @click.stop='log(artItem)'>直接购买</van-button>
              <van-button v-else size="mini" @click.stop='log(artItem)'>加入书架</van-button>
            </template>
          </van-card>
        </van-col>
      </van-row>
    </template>

    <van-row v-else>
      <van-col span='24'>
        <van-empty image="search" description="暂无数据" />
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { request } from 'network/request'

export default {
  name: 'Search',
  data() {
    return {
      // 搜索索引
      searchValue: '',
      // 搜索结果
      searchResult: [] 
    }
  },
  methods: {
    backOff() {
      this.$router.go(-1)
    },
    // 搜索页面的核心, 暂时只有在标题中进行查找
    onSearch(val) {
      // this.$toast(val)
      request({
        url: 'article/search',
        method: 'get',
        params: {
          title: val
        }
      }).then(res => this.searchResult = res.data)
      .catch(err => console.log(log))
    },
    onCancel() {
      this.$toast('取消')
      this.searchValue = ''
      this.searchResult = []
    },
    realCid(cid) {
      switch(cid) {
        case '1': return '生活';
        case '2': return '资讯';
        case '3': return '编程';
        case '4': return '互联网';
        case '5': return '科技';
      }
    },
    // 点击加入书架的效果
    log(item) {
      console.log(item)
    },
    // 携带数据跳转到文章详情页面
    articleItem(id) {
      this.$router.push({name: 'product', params: {id}})
    }
  }
}
</script>

<style scoped>
/* @import url(); 引入css类 */
.van-card {
  border-radius: 15px;
  margin-top: 15px;
}
</style>
